<template>
  <Row :gutter="32" type="flex" justify="center" class="panel-group">
      <i-col  :lg="8" :md="8" :xs="12" style="height: 120px;padding-bottom: 10px;">
          <infor-card color='#ff9900' icon="md-cog" :icon-size="48" shadow>
              <count-to :end="groupData.jobInfoCount" count-class="count-style"/>
              <p>任务总数</p>
          </infor-card>
      </i-col>
      <i-col  :lg="8" :md="8" :xs="12" style="height: 120px;padding-bottom: 10px;">
          <infor-card color='#2d8cf0' icon="md-football" :icon-size="48" shadow>
              <count-to :end="groupData.jboLogCount" count-class="count-style"/>
              <p>调度总次数</p>
          </infor-card>
      </i-col>
      <i-col  :lg="8" :md="8" :xs="12" style="height: 120px;padding-bottom: 10px;">
          <infor-card color='#9A66E4' icon="md-walk" :icon-size="48" shadow>
              <count-to :end="groupData.executorCount" count-class="count-style"/>
              <p>在线执行器数量</p>
          </infor-card>
      </i-col>
  </Row>
</template>

<script>
  import CountTo from '_c/count-to'
  import InforCard from '_c/info-card'
  export default {
    props: {
      groupData: {
        type: Object,
        required: true
      }
    },
    components: {
      CountTo,
        InforCard
    },
    mounted() {
    },
    data() {
      return {

      }
    },
    methods: {
      handleSetLineChartData(type) {
        this.$emit('handleSetLineChartData', type)
      }
    }
  }
</script>

<style lang="less" scoped>
   .count-style {
       font-size: 50px!important;
   }
</style>
